<template>
  <div style="height: 100%;">
    <el-tabs style="height: 100%;" type="border-card">
      
      <el-tab-pane lazy="true" label="制(储)氢数据库">
        <hydrogenDataBase ref="hydrogenDataBase"></hydrogenDataBase>
      </el-tab-pane>

      <el-tab-pane lazy="true" label="拖车输氢数据库">
        <trailerHydrogenDataBase ref="trailerHydrogenDataBase"></trailerHydrogenDataBase>
      </el-tab-pane>

      <el-tab-pane lazy="true" label="管道输氢数据库">
        <pipelineHydrogenDataBase ref="pipelineHydrogenDataBase"></pipelineHydrogenDataBase>
      </el-tab-pane>

      <el-tab-pane lazy="true" label="PEMFC热电联供数据库">
        <pemfcDataBase ref="pemfcDataBase"></pemfcDataBase>
      </el-tab-pane>

      <el-tab-pane lazy="true" label="掺氢数据库">
        <gmwhDataBase ref="gmwhDataBase"></gmwhDataBase>
      </el-tab-pane>

    </el-tabs>
           
  </div>
</template>

<script>
  import pipelineHydrogenDataBase from './pipelineHydrogenDataBase';
  import trailerHydrogenDataBase from './trailerHydrogenDataBase';
  import pemfcDataBase from './pemfcDataBase';
  import gmwhDataBase from './gmwhDataBase';
  import hydrogenDataBase from './hydrogenDataBase';


  export default {
    name: 'basicDatabase',
    components: {
      pipelineHydrogenDataBase, 
      trailerHydrogenDataBase,
      pemfcDataBase,
      gmwhDataBase,
      hydrogenDataBase,
    },

    data() {
      return {
         
      }
    },
    mounted: function() {
 
    },
    methods: {  
      handleClick : function(tab, event) {
        console.log(tab, event);
      },
      retrieveTrailerHydrogenDataBase : function(){
        this.$refs.trailerHydrogenDataBase.retrieveTrailerHydrogenDataBase();
      },
      retrievePemfcDataBase : function(){
        this.$refs.pemfcDataBase.retrievePemfcDataBase();
      },
      retrievePipelineHydrogenDataBase : function(){
        this.$refs.pipelineHydrogenDataBase.retrievePipelineHydrogenDataBase();
      }
    }
  }
</script>

<style scoped>

/deep/ .el-table th.el-table__cell.is-leaf {
     border-bottom: none;
 }
 /deep/ .el-table::before{
     background-color:transparent;
 }



/deep/ .el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}

.el-tabs--border-card>.el-tabs__header {
    background-color: #001b45;
    border-bottom: 1px solid #204285;
    margin: 0;
}

/deep/.el-tabs--border-card>.el-tabs__header {
    background-color: #07244f;
    border-bottom: 1px solid #082f7d;
    margin: 0;
}

/deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    color: #f2f2f2;
    background-color: #409EFF;
    border-right-color: #409EFF;
    border-left-color: #409EFF;
}

 /deep/ .el-radio-button__inner {
      white-space: nowrap;
      background: #131d4d;
      border: 1px solid #173374;
      font-weight: 500;
      border-left: 0;
      color: #ffffff;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      position: relative;
      cursor: pointer;
      -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
      transition: all .3s cubic-bezier(.645,.045,.355,1);
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 0;
  }

  /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item {
      -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
      transition: all .3s cubic-bezier(.645,.045,.355,1);
      border: 1px solid transparent;
      margin-top: -1px;
      color: #ffffff;
  }

  /deep/ .el-tabs--border-card {
    background: #202b614f;
    border: 1px solid #409EFF;
    border: 1px solid rgb(62 111 219 / 88%);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
}

</style>
